<template>
	<!-- 分享面板 -->
	<!-- <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" /> -->
		<view class="cu-card dynamic {{isCard?'no-card':''}}" style="overflow: auto;padding-top: 5vh;position: relative;">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg" :style="{ 'background-image': 'url(' + avator + ')' }">
						</view>
						<view class="content flex-sub">
							<view>{{ name }}</view>
							<view class="text-gray text-sm flex justify-between">
								{{ time }}<text style="margin-left: 2px;">{{ '#' + tag }}</text>
							</view>
						</view>
					</view>
				</view>
				<h3 class="text-content" style="width: 100%; text-align: center;">
					{{ title }}
				</h3>
				<view class="text-content" style="color: darkgray;">
					地址：{{ address }}
				</view>
				<view class="" style="color: black;padding: 0 4vw;">
					{{ content }}
				</view>
				<view v-for="(item, index) in imgList" :key="index">
					<view class=" flex-sub {{isCard?'col-3 grid-square':'col-1'}}" @click="showIMG(index)"
						style="padding:0 2vw;">
						<!-- <view class="bg-img {{isCard?'':'only-img'}}" :style="{ 'background-image': 'url(' + item + ')' }">
					</view> -->
						<img :src="item" alt="" style="margin: 0 auto;width: 100%; height: auto;" />
					</view>

				</view>

				<view v-if="tagid <= 4 && tagid >= 1">
					<view class="rank">
						<text style="margin-right: 2vw;">技术:</text><van-rate v-model="value4" void-icon="star" readonly
							void-color="#bdbdbd" />
					</view>
					<view class="rank">
						<text style="margin-right: 2vw;">速度:</text><van-rate v-model="value5" void-icon="star" readonly
							void-color="#bdbdbd" />
					</view>
					<view class="rank">
						<text style="margin-right: 2vw;">体力:</text><van-rate v-model="value6" void-icon="star" readonly
							void-color="#bdbdbd" />
					</view>
				</view>

				<view class="text-gray text-sm text-right padding">
					<text @click="ShareId">
						<text class="cuIcon-forwardfill margin-lr-xs"></text> 分享</text>
					<text @click="CommentPost">
						<text class="cuIcon-attentionfill margin-lr-xs"></text> 评论</text>
					<text v-if="Like == true" @click="like">
						<text class="cuIcon-like margin-lr-xs"></text> 收藏
					</text>
					<text v-if='Like == false' @click="dislike" style="color: red;">
						<text class="cuIcon-likefill margin-lr-xs"></text> 已收藏
					</text>
					<text @click="say" v-if="ifmy"><text class="cuIcon-messagefill margin-lr-xs"></text> 联系</text>
					<text @click="transe" v-if="!ifmy"><text class="cuIcon-messagefill margin-lr-xs"></text> 修改</text>
				</view>
				<!--  -->
				<van-empty description="暂无评论"
					image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
					v-if="comment_list.length == 0" />
				<view v-else
					style="margin-left: 4vw;font-size: x-small;color: burlywood;border-top: 1px solid aliceblue;">
					共有评论{{ Comment_ttoal }}条</view>
				<view v-for="(item, index) in comment_list" :key="index">
					<comment_section :avatar='item.avatar' :mesid='this.mesid' :content='item.content'
						:creatId='item.createBy' :name='item.username' :time='item.createTime' :id='item.id'
						:children='item.children'></comment_section>
				</view>
				<view class="more" @click="showMore" v-if="if_more" style="position: relative;">
					查看更多……
				</view>
			</view>
			<!-- 评论区 -->
			<view class="cu-bar foot input" style="width: 35vw;z-index: 100;position: absolute;" v-if="showInput">
				<input class="solid-bottom" v-model="CommentValue" :focus="false" maxlength="300" cursor-spacing="10" />
				<button class="cu-btn bg-green shadow" @click="PostComment">发送</button>
			</view>
		</view>
	<AllcommentDialog></AllcommentDialog>
</template>

<script>
	import {
		showpost,
		addMyfavoritepost,
		removeMyfavoritepost,
		getcommonents,
		postcomment
	} from '@/store/api.js'
	import AllcommentDialog from '@/subpkg/components/AllCommentDialog.vue'
	import comment_section from '@/subpkg/components/comment_section.vue'
	import {
		ref
	} from 'vue';
	import {
		showToast
	} from 'vant';
	export default {
		components: {
			comment_section,
			AllcommentDialog
		},
		setup() {
			const options = [{
					name: '微信',
					icon: 'wechat'
				},
				{
					name: '朋友圈',
					icon: 'wechat-moments'
				},
				{
					name: 'QQ',
					icon: 'qq'
				},
				{
					name: '复制链接',
					icon: 'link'
				}
			];
			return {
				options
			};
		},
		data() {
			return {
				posttid: '',
				showShare: false,
				Comment_ttoal: 0,
				value4: 2,
				value5: 3,
				value6: 1,
				tag: '',
				tagid: -1,
				if_more: true,
				CommentValue: '',
				showInput: false,
				// InputBottom: 0,
				ifmy: true,
				mesid: '',
				Like: true,
				userid: '',
				title: '',
				name: '',
				imgList: [],
				avator: '',
				time: '',
				address: '',
				content: '',
				list: [],
				comment_list: []
			}
		},
		onLoad(value) {
			const myid = uni.getStorageSync('userid')
			// console.log(value.id)
			if (value.copy)
				uni.setStorageSync('detail', value.copy)
			this.posttid = value.id
			showpost(value.id).then(res => {
				if (myid == res.data.posterId) {
					this.ifmy = false
				}
				console.log(res.data)
				this.tag = res.data.tags[0].name
				this.tagid = res.data.tags[0].id
				this.mesid = res.data.id
				this.userid = res.data.posterId
				this.title = res.data.title
				this.avator = res.data.posterAvatar
				this.name = res.data.posterUsername
				this.time = res.data.beginTime.substring(0, 10) + '-' + res.data.beginTime.substring(12, 16) +
					'-' + res.data.endTime.substring(0, 10) + '-' + res.data.endTime.substring(12, 16)
				this.address = res.data.meetAddress
				this.content = this.processString(res.data.content).text
				this.imgList = this.processString(res.data.content).images
				this.value4 = this.processString(res.data.content).rank.value4 ? this.processString(res.data
					.content).rank.value4 : ''
				this.value5 = this.processString(res.data.content).rank.value5 ? this.processString(res.data
					.content).rank.value5 : ''
				this.value6 = this.processString(res.data.content).rank.value6 ? this.processString(res.data
					.content).rank.value6 : ''
				this.Like = !res.data.isKeep
				console.log(this.value4)
				console.log(this.value5)
				console.log(this.value6)
				getcommonents(this.mesid, 1, 3).then(res => {
					if (res.data.data.total == 0) {
						this.if_more = false
					}
					console.log(res.data)
					this.Comment_ttoal = res.data.data.total
					res.data.data.rows.forEach(item => {
						this.comment_list.push(item)
					})
				}).catch(err => {
					console.log(err)
				})
			})
		},
		methods: {
			ShareId() {
				uni.setClipboardData({
					data: "复制到Meet打开：快来加入我们吧:" + this.posttid,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title: "口令已复制",
							icon: "success"
						});
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
						uni.showToast({
							title: "复制失败",
							icon: "none"
						});
					}
				});
			},
			onSelect(option) {
				this.showShare = false;
				console.log(option.name)
				if (option.name == '微信') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 1,
						summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (option.name == 'QQ') {
					uni.share({
						provider: "qq",
						type: 1,
						title: 'Meet',
						summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
						href: 'http://webmeet.ysyxmy.top/#/',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else if (option.name == '朋友圈') {
					uni.share({
						provider: "weixin",
						scene: "WXSceneTimeline",
						type: 1,
						summary: "复制到Meet打开：快来加入我们吧:" + this.posttid,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				} else {
					uni.setClipboardData({
						data: "复制到Meet打开：快来加入我们吧:" + this.posttid,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							uni.showToast({
								title: "复制成功",
								icon: "success"
							});
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
							uni.showToast({
								title: "复制失败",
								icon: "none"
							});
						}
					});

				}
			},
			showIMG(index) {
				uni.previewImage({
					current: index,
					urls: this.imgList,
					loop: true,
					indicator: Number,
					longPressActions: true
				})
			},
			showMore() {
				uni.$emit('showCommentDialog', this.mesid)
			},
			PostComment() {
				const data = {
					postId: this.mesid,
					type: 0,
					rootId: -1,
					toCommentId: this.userid,
					toCommentUserId: '',
					content: this.CommentValue
				}
				this.Comment_ttoal++
				postcomment(data).then(res => {
					if (this.comment_list.length < 3) {
						console.log('这个是再次评论列表')
						getcommonents(this.mesid, 1, 3).then(res => {
							this.comment_list = []
							if (res.data.data.total == 0) {
								this.if_more = false
							}
							console.log(res.data)
							res.data.data.rows.forEach(item => {
								this.comment_list.push(item)
							})
						}).catch(err => {
							console.log(err)
						})

					}
				})

				this.CommentValue = ''
				this.showInput = false
			},
			CommentPost() {
				this.showInput = true
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			say() {
				// uni.navigateTo({
				// 	url: `/subpkg/chat_detail/chat_detail?name=${this.name}&src=${this.avator}&userid=${this.userid}`
				// })
				let ifConnect = uni.getStorageSync('AlreadyConnect')
				if (ifConnect) {
					uni.navigateTo({
						url: `/subpkg/chat_detail/chat_detail?name=${this.name}&src=${this.avator}&userid=${this.userid}`
					})
				} else {
					console.log(this.avator)
					uni.setStorageSync('detail', JSON.stringify({
						name: this.name,
						avator: this.avator,
						userid: this.userid
					}))
					uni.switchTab({
						url: '/pages/Chat/Chat'
					})
				}
			},
			transe() {
				uni.navigateTo({
					url: `/subpkg/changeMypost/changeMypost?id=${this.mesid}`
				})
			},
			like() {
				this.Like = false
				addMyfavoritepost(this.mesid)
			},
			dislike() {
				this.Like = true
				removeMyfavoritepost(this.mesid)
			},
			showdetail(item) {
				// uni.$emit('showdialog',item)
				console.log(item)
				uni.navigateTo({
					url: `/subpkg/mes_detail/mes_detail?id=${item.title}`
				})
			},
			processString(inputString) {
				const parts = inputString.split('**/img/**');

				// 获取文本部分和图片 URL 部分
				const textPart = parts[0];
				const imageUrls = parts[1] ? parts[1].split(',') : [];

				// 将图片 URL 部分存储为数组
				const imagesArray = imageUrls.map(url => url.trim());

				const part2 = textPart.trim().split('**/rank/**')

				let newtext = part2[0]
				let rankpart = part2[1] ? JSON.parse(part2[1]) : ''
				// 返回处理后的结果，图片部分作为数组返回
				return {
					rank: rankpart, //评分部分
					text: newtext.trim(), // 去除文本部分两端的空格
					images: imagesArray // 图片 URL 部分作为数组返回
				};

			}
		}
	}
</script>

<style lang="scss" scoped>
	.cu-card {
		width: 100vw;
		// height: 100vh;
	}

	@media screen and (min-width: 600px) {
		.cu-card {
			width: 35vw;
			// height: 100vh;
		}
	}

	.more {
		width: 100%;
		text-align: center;
		color: gray;
	}

	.rank {
		margin-left: 5vw;
	}

	// 页面
	.meslist {
		position: relative;
		z-index: 1;
	}

	/* 单个卡片 */
	.mes {
		z-index: 5;
		display: flex;
		margin-top: 10rpx;
		border: 1px solid #F0F8FF;
		// background-color: 	#F8F8FF;
		height: 170rpx;
		align-items: center;
	}

	.headimg {
		width: 100rpx;
		height: 100rpx;
		margin-right: 50rpx;
		border-radius: 75%;
	}

	.content {
		width: 600rpx;
		font-size: 25rpx;
	}

	.title {
		font-weight: 700;
		font-size: 30rpx;
	}

	.bg {
		width: 100%;
		height: 74%;
		z-index: 0;
		position: absolute;
	}
</style>